<template>
    <layout title="个人信息" :contentPadding="'0'">
        <div class="user-info-list">
            <van-cell title="个人头像" value="内容" is-link>
                <div class="suer-picture">
                    <van-image width="6.4vw" height="6.4vw" fit="cover" :src="pictureImage" />
                </div>
            </van-cell>
            <van-cell title="我的昵称" value="张三" is-link />
            <van-cell title="店铺名称" value="我的店铺名字" is-link />
            <van-cell title="密码登录" value="修改点击" is-link />
            <van-cell title="实名认证" value="已认证" is-link />
            <van-cell title="绑定手机" value="1321354548" is-link />
            <van-cell title="密码支付" value="修改点击" is-link />
            <div class="info-button">
                <van-button round size="normal" block type="success"
                    color="linear-gradient(to right,#F07748, #ED1850)">保存</van-button>
            </div>
        </div>
    </layout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import layout from '@/components/Layout/index.vue'
import pictureImage from '@image/User/picture.png'

</script>

<style lang="scss" scoped>
.user-info-list{
    background-color: var(--white);margin: 20px;border-radius: 10px;padding-bottom: 20px;
}
.info-button{padding: 20px; margin-top: 20px;}
.suer-picture {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;float: right;
}
</style>